import { Spin } from "ant-design-vue";

export const PageLoading = {
  name: "PageLoading",
  props: {
    tip: {
      type: String,
      default: "Loading.."
    },
    size: {
      type: String,
      default: "large"
    }
  },
  render() {
    const style = {
      textAlign: "center",
      background: "rgba(0,0,0,0.6)",
      position: "fixed",
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 1100
    };
    const spinStyle = {
      position: "absolute",
      left: "50%",
      top: "40%",
      transform: "translate(-50%, -50%)"
    };
    return (
      <div style={style}>
        <Spin size={this.size} style={spinStyle} tip={this.tip} />
      </div>
    );
  }
};

const version = "0.0.1";
const loading = {};

loading.newInstance = (Vue, options) => {
  let loadingElement = document.querySelector("body>div[type=loading]");
  if (!loadingElement) {
    loadingElement = document.createElement("div");
    loadingElement.setAttribute("type", "loading");
    loadingElement.setAttribute("class", "ant-loading-wrapper");
    document.body.appendChild(loadingElement);
  }

  const cdProps = Object.assign(
    { visible: false, size: "large", tip: "Loading..." },
    options
  );

  const instance = new Vue({
    data() {
      return {
        ...cdProps
      };
    },
    render() {
      const { tip } = this;
      const props = {};
      this.tip && (props.tip = tip);
      if (this.visible) {
        return <PageLoading {...{ props }} />;
      }
      return null;
    }
  }).$mount(loadingElement);

  function update(config) {
    const { visible, size, tip } = { ...cdProps, ...config };
    instance.$set(instance, "visible", visible);
    if (tip) {
      instance.$set(instance, "tip", tip);
    }
    if (size) {
      instance.$set(instance, "size", size);
    }
  }

  return {
    instance,
    update
  };
};

const api = {
  show: function(options) {
    this.instance.update({ ...options, visible: true });
  },
  hide: function() {
    this.instance.update({ visible: false });
  }
};

const install = function(Vue, options) {
  if (Vue.prototype.$loading) {
    return;
  }
  api.instance = loading.newInstance(Vue, options);
  Vue.prototype.$loading = api;
};

export default {
  version,
  install
};
